<template>
  <div class="flowCanvas">
    <button class="tmp" @click="JsonToNode">asd</button>
    <div class="container" ref="container"></div>
    <!-- 节点面板 -->
    <NodePanel v-if="lf" :lf="lf"></NodePanel>
    <!-- 数据面板 -->
<!--    <BpmnDataPanel v-if="lf" :lf="lf"></BpmnDataPanel>-->
    <!-- 弹窗编辑 -->
    <el-drawer
        title="编辑节点"
        :modal="false"
        v-model="drawer"
        :direction="'rtl'"
    >
      <div>节点ID: {{ currentNode.data.id }}</div>
      <div>节点名称: {{ currentNode.data.text ? currentNode.data.text.value : '没有配置节点text值' }}</div>
    </el-drawer>
  </div>
</template>

<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import {
  BpmnElement,
  BpmnXmlAdapter,
  Snapshot,
  Control,
  Menu,
  SelectionSelect,
} from "@logicflow/extension";

import "@logicflow/extension/lib/style/index.css";
import NodePanel from "@/components/NodePanel.vue";

export default {
  name: "logic-flow",
  components: {NodePanel},
  data() {
    return {
      lf: null,
      drawer: false,
      currentNode: null,
      tmpJson: "{\"nodes\":[{\"id\":\"1e4fb68a-e8da-478f-a280-9fb9b0ecb215\",\"type\":\"CustomStart\",\"x\":270,\"y\":300,\"properties\":{\"start\":\"开始\"},\"text\":{\"x\":270,\"y\":300,\"value\":\"开始\"}},{\"id\":\"c0e0e7fb-a08f-42ef-90dd-b32933549d92\",\"type\":\"CustomRect\",\"x\":300,\"y\":480,\"properties\":{\"CustomRect\":\"矩形\"},\"text\":{\"x\":300,\"y\":480,\"value\":\"普通节点\"}}],\"edges\":[]}\n"
    };
  },
  // components: { CustomNodePanel, BpmnDataPanel },

  mounted() {
    LogicFlow.use(BpmnElement);
    LogicFlow.use(BpmnXmlAdapter);
    LogicFlow.use(Snapshot);
    LogicFlow.use(Control);
    LogicFlow.use(Menu);
    LogicFlow.use(SelectionSelect);
    //初始化
    this.lf = new LogicFlow({
      container: this.$refs.container,
      grid: {
        size: 10,
        visible: true,
        type: "mesh",
        config: {
          color: "#ababab",
          thickness: 1,
        },
      },
    });
    this.lf.render();
    //绑定事件
    const { eventCenter } = this.lf.graphModel;
    this.bindEvent(eventCenter);
  },

  methods: {
    bindEvent(eventCenter) {
      eventCenter.on("node:click", (args) => {
        console.log("节点单击", args);
        this.drawer = true;
        this.currentNode = args;
      });
    },
    traverseNodes() {
      // let nodes = this.lf.getGraphRawData().nodes;
      // let edges = this.lf.getGraphRawData().edges;
      let data = this.lf.getGraphRawData();

      // console.log(JSON.stringify(nodes))
      let jsonStr = JSON.stringify(data)
      const blob = new Blob([jsonStr], { type: 'application/json' });
      const url = URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = url;
      link.download = 'data.json';

      link.click();
    },
    JsonToNode() {
      console.log("asdsad")
      const jsonData = JSON.parse(this.tmpJson);
      console.log(jsonData.nodes)

      // 添加节点
      jsonData.nodes.forEach(node => {
        this.lf.addNode(node);
      });

      // 添加边
      jsonData.edges.forEach(edge => {
        this.lf.addEdge(edge);
      });
    }
  },
};
</script>

<style>
.flowCanvas {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 1px;
  display: flex;
}
.flowCanvas .container {
  display: flex;
  flex-grow: 1; /*铺满剩余空间*/
  border: 3px solid #ababab;
  overflow: hidden;
}
.tmp {
  background-color: #2987ff;
  left: 50%;
  top: 10px;
  width: 200px;
  height: 200px;
}
</style>